
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>房产管理 - 智慧小区管理系统</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style>
        body { padding: 24px; background: #f5f7fa; }
        .property-toolbar { margin-bottom: 16px; }
        .layui-table th, .layui-table td { text-align: center; }
        /*删除了模态框样式*/
        .property-toolbar {
            display: flex;
            flex-wrap: nowrap; /* 不换行 */
            align-items: center; /* 垂直居中对齐 */
            gap: 10px; /* 元素之间的间距 */
        }
        .layui-inline {
            flex: 1; /* 每个元素占据相等的空间 */
        }
        .layui-input, .layui-select {
            width: 100%; /* 输入框和选择框占满父元素的宽度 */
        }
    </style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-header" style="font-size:1.2em;font-weight:bold;">房产管理</div>
    <div class="layui-card-body">
        <!-- 搜索表单 -->
        <form class="layui-form property-toolbar" id="searchForm">
            <div class="layui-inline">
                <input type="text" name="propertyId" placeholder="房产ID" class="layui-input">
            </div>
            <div class="layui-inline">
                <input type="text" name="buildingNumber" placeholder="楼栋号" class="layui-input">
            </div>
            <div class="layui-inline">
                <input type="text" name="unitNumber" placeholder="单元号" class="layui-input">
            </div>
            <div class="layui-inline">
                <input type="text" name="floorNumber" placeholder="楼层" class="layui-input">
            </div>
            <div class="layui-inline">
                <input type="text" name="roomNumber" placeholder="房间号" class="layui-input">
            </div>
            <div class="layui-inline">
                <input type="text" name="name" placeholder="业主姓名" class="layui-input">
            </div>
            <div class="layui-inline">
                <input type="text" name="residentId" placeholder="业主ID" class="layui-input">
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: 120px;">
                    <select name="roomConfigId" id="roomTypeIdSelect">
                        <option value="">请选择户型</option>
                    </select>
                </div>
            </div>
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="search"><i class="layui-icon layui-icon-search"></i> 查询</button>
            <button class="layui-btn layui-btn-primary" type="reset"><i class="layui-icon layui-icon-refresh"></i> 重置</button>
        </form>

        <!-- 工具栏 -->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
            </div>
        </script>

        <!-- 数据表格 -->
        <table class="layui-table" id="propertyTable" lay-filter="propertyTableFilter"></table> <!--lay-filter改为：propertyTable->propertyTableFilter-->

        <!-- 操作栏模板 -->
        <script type="text/html" id="tableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs"
               lay-event="edit"
               title="编辑">
                <i class="layui-icon layui-icon-edit"></i>
            </a>
            <a class="layui-btn layui-btn-danger layui-btn-xs"
               lay-event="delete"
               title="删除">
                <i class="layui-icon layui-icon-delete"></i>
            </a>
        </script>

        <!-- 添加/编辑模态框 -->
        <div id="edit" style="display: none; padding: 10px;">  <!--id="addEditModal"改为-->
            <form class="layui-form" id="formData" lay-filter="editForm">  <!--formData->editForm-->
                <!-- 隐藏字段 -->
                <input type="hidden" name="propertyId">

                <div class="layui-form-item" id="property-laylabel">
                    <label class="layui-form-label">房产ID</label>
                    <div class="layui-input-block">
                        <input type="number" name="propertyId" placeholder="房产ID" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">楼栋号</label>
                    <div class="layui-input-block">
                        <input type="text" name="buildingNumber" required lay-verify="required" placeholder="请输入楼栋号" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">单元号</label>
                    <div class="layui-input-block">
                        <input type="text" name="unitNumber" required lay-verify="required" placeholder="请输入单元号" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">楼层</label>
                    <div class="layui-input-block">
                        <input type="number" name="floorNumber" required lay-verify="required|number" placeholder="请输入楼层" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">房间号</label>
                    <div class="layui-input-block">
                        <input type="text" name="roomNumber" required lay-verify="required" placeholder="请输入房间号" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">面积(㎡)</label>
                    <div class="layui-input-block">
                        <input type="number" name="area" required lay-verify="required|number" placeholder="请输入面积" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">业主Id</label>
                    <div class="layui-input-block">
                        <input type="text" name="residentId" lay-verify="number" placeholder="请输入业主Id" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">户型</label>
                    <div class="layui-input-block">
                        <select name="roomConfigId" lay-verify="required" id="editroomTypeIdSelect" lay-filter="editroomTypeIdSelect">
                            <option value="">请选择户型</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formSubmit">提交</button>
                    </div>
                </div>
                <!--<div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formSubmit">提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>-->
            </form>
        </div>
    </div>
</div>


<script src="../lib/layui-v2.6.3/layui.js"></script>
<script>
    layui.use(['table', 'form', 'layer', 'jquery'], function () {
        const table = layui.table;
        const form = layui.form;
        const layer = layui.layer;
        const $ = layui.jquery;
        $.ajaxSetup({
            beforeSend: function(xhr) {
                const data = JSON.parse(localStorage.getItem('user'));
                //输出token
                console.log(data.token);
                if (data.token) {
                    xhr.setRequestHeader('Authorization', 'Bearer ' + data.token);
                }
            }
        });

        let index;
        // 当前操作类型（add/edit）
        let currentAction = 'add';
        // 当前编辑的房产ID
        let currentEditId = null;

        // 加载户型数据（需连接后端接口）
        function loadRoomTypes(url,selectId) {
            $.getJSON(url, function(res) {
                if (res.code === 0 && res.data) {
                    //置空
                    $(selectId).html("");
                    var options = '<option value="">请选择户型</option>';
                    res.data.forEach(function (item) {

                        options += `<option value="${item.id}">${item.value}</option>`;
                    });
                    $(selectId).append(options);//在末尾追加
                    form.render('select');
                }
            });
        }

        loadRoomTypes('/roomType/queryAll', '#roomTypeIdSelect');
        loadRoomTypes('/roomType/queryAll', '#editroomTypeIdSelect');

        // 初始化表格
        table.render({
            elem: '#propertyTable',
            url: '/property/queryPage',
            method: 'get',
            toolbar: '#toolbarDemo',
            page: true,
            parseData: function (res) {
                console.log('parseData:', res);  // 打印原始响应数据
                return {
                    code: res.code,
                    msg: res.message,
                    count: res.count,
                    data: res.data
                };
            },
            response: {
                statusName: 'code',
                statusCode: 0,
                msgName: 'message',
                countName: 'count',
                dataName: 'data'
            },
            cols: [[
                { field: 'propertyId', title: '房产ID' },
                { field: 'buildingNumber', title: '楼栋号' },
                { field: 'unitNumber', title: '单元号' },
                { field: 'floorNumber', title: '楼层' },
                { field: 'roomNumber', title: '房间号' },
                { field: 'area', title: '面积(㎡)' },
                { field: 'residentName', title: '业主姓名' },
                { field: 'roomType', title: '户型' },
                { title: '操作', toolbar: '#tableBar', width: 150, align: 'center' }
            ]]
        });

        // 监听工具栏事件
        table.on('toolbar(propertyTableFilter)', function(obj){
            if (obj.event === 'add') {
                form.val('editForm',{propertyId:'',buildingNumber:'',unitNumber:'',floorNumber:'',roomNumber:'',area:'',residentId:'',roomTypeId:''});//清空表单
                $("#property-laylabel").hide();
                index = layer.open({
                    title: '添加房产',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['500px', '600px'],
                    content: $("#edit"),
                    success: function(layero, idx) {
                        // 在弹窗加载完成后绑定 resize 事件
                        $(window).on("resize", function () {
                            layer.full(idx);
                        });
                    },
                    end: function() {
                        // 弹窗关闭后移除监听器
                        $(window).off("resize");
                    }
                });
            }
        });

        // 监听行工具事件
        table.on('tool(propertyTableFilter)', function(obj){
            const data = obj.data;
            if(obj.event === 'edit') {
                $("#property-laylabel").show();
                form.val("editForm", data);
                index = layer.open({
                    title: '编辑房产信息',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['500px', '600px'],
                    content: $("#edit"),
                    success: function(layero, idx) {
                        // 在弹窗加载完成后绑定 resize 事件
                        $(window).on("resize", function () {
                            layer.full(idx);
                        });
                    },
                    end: function() {
                        // 弹窗关闭后移除监听器
                        $(window).off("resize");
                    }
                });
                return false;
            } else if(obj.event === 'delete') {
                layer.confirm('确定删除该房产信息吗？', function(index){
                    // 连接后端删除接口
                    $.getJSON('/property/delete?id='+data.propertyId, function(res){
                        if(res.code === 0) {
                            layer.msg('删除成功');
                            obj.del();
                        } else {
                            layer.msg('删除失败: ' + res.message);
                        }
                    });
                    layer.close(index);
                });
            }
        });

        // 提交表单数据
        form.on('submit(formSubmit)', function(data){
            var field = data.field;
            var url = field.propertyId ? '/property/update' : '/property/add';
            $.post(url, field, function(res){
                if(res.code === 0) {
                    layer.msg(field.propertyId ? "更新成功" : "添加成功");
                    layer.close(index);
                    table.reload('propertyTable');
                } else (
                    layer.msg(field.propertyId ? "更新失败" : "添加失败")
                )
            });
            return false;
        });

        // 搜索提交
        form.on('submit(search)', function (data) {
            table.reload('propertyTable', {
                where: data.field,
                page: { curr: 1 }
            });
            return false;
        });

        // 重置按钮点击事件
        $(document).on('click', '.layui-btn-primary[type="reset"]', function () {
            $('#searchForm')[0].reset();
            form.render();
            table.reload('propertyTable', {
                where: {},
                page: { curr: 1 }
            });
            return false;
        });
    });
</script>
</body>
</html>
